<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>box-shadow绘制简单图形</title>
  <style>
    body {
      background: #999;
    }

    div {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background: #fff;
      border-radius: 50%;
      /*box-shadow的五个参数，x轴偏移，y轴偏移 模糊量 阴影大小 颜色*/
      box-shadow:

        120px 0px 0 -10px #795548,
        95px 20px 0 0px #607D8B,
        30px 30px 0 -10px green,
        90px -20px 0 0px #FFC107,
        40px -40px 0 0px #2196F3;
      animation: change 6s infinite;
    }

    body {
      background: #999;
    }

    div {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background: #fff;
      border-radius: 50%;
      box-shadow:
        120px 0px 0 -10px #795548,
        95px 20px 0 0px #607D8B,
        30px 30px 0 -10px green,
        90px -20px 0 0px #FFC107,
        40px -40px 0 0px #2196F3;
      animation: change 6s infinite;
    }

    @keyframes change {
      100% {
        box-shadow:
          120px 0px 0 -10px #fff,
          95px 20px 0 0px #fff,
          30px 30px 0 -10px #fff,
          90px -20px 0 0px #fff,
          40px -40px 0 0px #fff;
      }
    }

    .div2 {
      position: absolute;
      transform: translateY(100px);
      left: 50%;
      top: 50%;
      box-shadow:
        120px 0px 0 -10px #fff,
        95px 20px 0 0px #fff,
        30px 30px 0 -10px #fff,
        90px -20px 0 0px #fff,
        40px -40px 0 0px #fff;
    }
  </style>
</head>

<body>
  <div></div>
  <div class="div2"></div>
</body>

</html>